<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- art-template是js库，是一个简约的、超快的模板引擎，用于简化拼接字符串，把js数据传到html中展示出来 -->
    <script src="public/js/template-web.js"></script>
</head>
<body>
    <!-- 新建一个容器 -->
    <div id="container"></div>
    <div id="container2"></div>

    <!-- 定义一个模板 -->

    <!-- {{ 对象中的属性 }} -->

    <!-- 遍历 -->
    <!-- 
        {{ each 对象中的属性名 value index }}

        {{ /each }} 
    
    -->

    <!-- 条件判断 -->
    <!-- 
        {{ if 条件 }}

        {{ /if }} 
    -->
    <script id="mydemo" type="text/html">
        <div>{{ name }}</div>
        <div>{{ age }}</div>
        <div>{{ sex }}</div>
        <div>
            {{ each arrs v i}}
                <p>{{ v }} {{ i }}</p>
            {{ /each }}
        </div>
    </script>

    <script>
        var user={
            name:"alice",
            age:20,
            sex:"男",
            arrs:["嘻嘻","哈哈"]
        };
        // template(id,data);会返回一个字符串
        // id:模板的id
        // data:是对象格式的数据

        var str=template("mydemo",user);
        document.getElementById("container").innerHTML=str;

        // template.render(字符串,数据);
        // 数据：是对象格式的数据
        var s="<div>{{ name }}</div><div>{{ age }}</div><div>{{ sex }}</div>";
        var strs=template.render(s,user);//返回一个字符串
        console.log(strs);
        document.getElementById("container2").innerHTML=strs;
    </script>

</body>
</html>